<template>
  <div>
    <h3>售后</h3>
    <el-card class="box-card">
      <el-row>
        <el-col :span="24">
          <!--     放搜索条件   
          :inline="true"  变成行内表单
          -->
          <el-form :inline="true">
            <el-form-item label="售后类型">
              <el-select v-model="param.shShtype" placeholder="售后类型" @change="queryShouhou">
                <el-option
                  v-for="st in shouhouTypeList"
                  :key="st.id"
                  :label="st.shtName"
                  :value="st.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="发货状态">
              <el-select
                v-model="param.logistics.logisticsStatus"
                placeholder="发货状态"
                @change="queryShouhou"
              >
                <el-option label="未发货" value="1"></el-option>
                <el-option label="已发货" value="2"></el-option>
              </el-select>
            </el-form-item> -->

            <el-form-item label="售后状态">
              <el-select v-model="param.shStatus" placeholder="售后状态" @change="queryShouhou">
                <el-option label="待审核" value="1"></el-option>
                <el-option label="待退款" value="5"></el-option>
                <el-option label="已退款" value="6"></el-option>
                <el-option label="待退货" value="3"></el-option>

              </el-select>
            </el-form-item>
            
            <el-form-item label="下单日期">
              <el-date-picker
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
                v-model="param.queryDate"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="关键字：">
              <el-input style="width: 180px;" v-model="param.content" placeholder="订单编号/售后编号"></el-input>
            </el-form-item>
            <br />
            <el-form-item>
              <el-button type="primary" @click="queryShouhou">查询</el-button>
              <el-button @click="clean">清空</el-button>
              <!-- <el-button @click="daochu">导出</el-button> -->
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-card>
    <br />
    <el-card>
      <el-row>
        <el-col :span="20">
          <el-menu class="el-menu-demo" mode="horizontal" @select="selecStatus">
            <el-menu-item index>全部</el-menu-item>
            <el-menu-item index="1">已申请/待审核</el-menu-item>
            <el-menu-item index="2">已关闭</el-menu-item>
            <el-menu-item index="3">待退货</el-menu-item>
            <el-menu-item index="4">已退货</el-menu-item>
            <el-menu-item index="5">待退款</el-menu-item>
            <el-menu-item index="6">已完成</el-menu-item>
          </el-menu>
        </el-col>
      </el-row>
      <el-row style="margin-top: 15px">
        <el-col>
          <el-table
            :data="tableData"
            border
            @selection-change="handleSelectionChange"
            style="width: 100%"
          >
            <!-- <el-table-column prop label type="selection"></el-table-column> -->
            <el-table-column prop="productName" label="商品信息" width="180"></el-table-column>
            <el-table-column label="编号" width="260px">
              <template slot-scope="scope">
                <div>售后编号： {{ scope.row.id }}</div>
                订单编号： {{ scope.row.oid }}
              </template>
            </el-table-column>

            <el-table-column prop="shStatus" label="售后状态" width="70px">
              <template slot-scope="scope">{{ fahuostatus(scope.row.shStatus) }}</template>
            </el-table-column>
            <el-table-column prop="orderAllmoney" label="订单金额" width="80px"></el-table-column>
            <el-table-column prop="tuikuanMoney" label="退款金额(优惠前)"></el-table-column>
            <el-table-column prop="shReason" label="售后原因"></el-table-column>
            <el-table-column prop="shCreatetime" label="申请时间"></el-table-column>
            <el-table-column prop="address" label="操作" style="width: 230px;">
              <template slot-scope="scope">
               
                <a @click="queryShouhouDetail(scope.row)" style="color:dodgerblue;">详情/处理</a>&nbsp;|
                <a @click="beizhu(scope.row)" style="color:dodgerblue;">备注</a>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <!-- 分页 -->
      <el-row>
        <el-col :span="24">
          <el-pagination
            background
            :page-sizes="[10, 20, 50]"
            :page-size="10"
            layout="total,sizes,prev, pager, next"
            :total="total"
            @next-click="nextPage"
            @prev-click="precPage"
            @size-change="changePage"
            @current-change="changePageNum"
          ></el-pagination>
        </el-col>
      </el-row>

      <el-dialog title="售后单详情" :visible.sync="dialogForShouhouDetail">
        <el-form>
          <!-- style="margin-left: 150px;" -->
          售后表id：{{shouhouDetail.zyShouhou.id}}
          <br /> <br />
          订单id：{{shouhouDetail.zyShouhou.oid}}
          <br /> <br />
          订单状态：{{ orderState(this.shouhouDetail.zyOrder.state) }}
          <br><br>
          -----售后原因：{{shouhouDetail.zyShouhou.shReason}}
          <br><br>
          订单详情id：{{shouhouDetail.zyShouhou.shOdid}}
          <br /> <br />
          用户id： {{shouhouDetail.zyShouhou.shUserid}}
          <br /> <br />
          商品id：{{shouhouDetail.zyShouhou.shProductid}}
          <br /> <br />
          商品信息：{{shouhouDetail.zyShouhou.productName}}
          <br /> <br />
          退货数量：{{ shouhouDetail.zyShouhoudetail.shdThnum }}
          <br> <br />
          订单总金额：{{shouhouDetail.zyShouhou.orderAllmoney}}
          <br /> <br />
          退款金额(展示金额为优惠前金额，实际退款为订单优惠后金额)：{{shouhouDetail.zyShouhou.tuikuanMoney}}
          <br /> <br />
          售后单类型：{{ shouhoudanType(this.shouhouDetail.zyShouhou.shShtype) }}
          <br /> <br />
          售后单状态：{{ shouhoudanState(this.shouhouDetail.zyShouhou.shStatus) }}
          <!-- <br><br> -->
          <!-- 起始点：{{shouhouDetail.zyShouhou.fromWhere}}
          <br /> <br />
          终点：{{shouhouDetail.zyShouhou.toWhere}}
          <br /> <br />
          物流单号：{{shouhouDetail.zyShouhou.wuliuId}} -->
          <br /> <br />
          售后单申请时间：{{shouhouDetail.zyShouhou.shCreatetime}}
          <br /> <br />
          备注：{{shouhouDetail.zyShouhou.shRemark}}
        </el-form>
        <div slot="footer" class="dialog-footer">
            <!-- <a @click="shenhe(scope.row)" style="color:dodgerblue;">审核通过</a>|&nbsp;
            <a @click="shenhenot(scope.row)" style="color:dodgerblue;">审核不通过</a>|&nbsp; -->
            <el-button @click="shenhenot" type="warning" v-if="this.shouhouDetail.zyShouhou.shStatus==1">审核不通过</el-button>
            <el-button @click="shenhe" type="primary" v-if="this.shouhouDetail.zyShouhou.shStatus==1">审核通过</el-button>
            <el-button @click="tuikuan" type="danger" v-if="this.shouhouDetail.zyShouhou.shStatus==5">退款</el-button>
          <el-button @click="guanbi()">关 闭</el-button>

        </div>
      </el-dialog>

      <!-- 第二个模态框：编辑售后单备注 -->
      <el-dialog title="编辑备注" :visible.sync="dialogForBeizhu">
        <el-form>
          <!-- 售后单编号： -->
          {{shouhouDetail.id }}
          <el-form-item label="售后单备注：" label-width="100px">
            <el-input autocomplete="off" v-model="shouhouDetail.shRemark"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="quxiao()">取 消</el-button>
          <el-button type="primary" @click="updateShouhou()">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>
  
  <script>
//导入水印模板
import initWatermark from "../watermark.js";

export default {
  data() {
    return {
      userName: null,
      dialogForBeizhu: false,
      shouhouTypeList: [],
      custom: {},
      customLevel: {},
      userList: [],
      dialogForShouhouDetail: false,
      selectionData: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      param: { logistics: { logisticsStatus: null } },

      activeIndex: "",
      searchCondition: {
        payMethod: "",
        orderNum: "",
        orderStartTime: "",
        orderEndTime: "",
        userName: "",
        userTel: "",
        orderStatus: "",
        beizhumsg: null
      },
      options: [],
      tableData: [],
      shouhouDetail: {zyShouhou:{},zyShouhoudetail:{},zyOrder:{}}
    };
  },
  methods: {
    clean(){
      this.param={ logistics: { logisticsStatus: null } };
      this.queryShouhou();
    },
    orderState(val){
      if (val == 0) {
        return "办理中";
      }else if (val == 1) {
        return "待付款";
      }else if (val == 2) {
        return "已付款";
      } else if (val == 3) {
        return "已发货";
      } else if (val == 4) {
        return "交易完成";
      } else if (val == 5) {
        return "已取消";
      } 
    },
    shouhoudanType(val){
       if (val == 1) {
        return "仅退款（不需物流）";
      }else if (val == 2) {
        return "退货退款";
      } else if (val == 3) {
        return "退换货";
      } else if (val == 4) {
        return "返修";
      } else if (val == 5) {
        return "维修（不需物流）";
      }else if(val==6){
        return "投诉（不需物流）";
      }
    },
    shouhoudanState(val){
      // 1已申请、2已关闭、3待退货、4已退货、5待退款、6已完成
    if  (val == 1) {
        return "已申请";
      }else if (val == 2) {
        return "已关闭";
      } else if (val == 3) {
        return "待退货";
      } else if (val == 4) {
        return "已退货";
      } else if (val == 5) {
        return "待退款";
      }else if(val==6){
        return "已完成";
      }
    },
    guanbi() {
      this.dialogForShouhouDetail = false;
      this.shouhouDetail = {};
    },
    updateShouhou() {
      this.$axios
        .post("api/order-server/shouhou/updateShouhou", this.shouhouDetail)
        .then(res => {
          console.log(res.data);
          if (res.data.code == 200) {
            this.$message({
              showClose: true,
              message: "编辑成功",
              type: "success"
            });
            this.dialogForBeizhu = false;
            this.shouhouDetail = {};
          }
        });
    },
    beizhu(val) {
      this.dialogForBeizhu = true;
      this.$axios
        .post("api/order-server/shouhou/queryShouhouDetail", val.id)
        .then(res => {
          console.log(res.data);
          if (res.data.code == 200) {
            this.shouhouDetail = res.data.data;
          }
        });
    },
    queryShouhouDetail(val) {
      this.dialogForShouhouDetail = true;
      this.$axios
        .post("api/order-server/shouhou/queryShouhouDetail", val.id)
        .then(res => {
          console.log(res.data);
          if (res.data.code == 200) {
             this.shouhouDetail = res.data.data;
          }
        });
    },
    shenhe() {
      if (this.shouhouDetail.zyShouhou.shStatus != 1) {
        this.$message({
          showClose: true,
          message: "不能审核",
          type: "error"
        });
      } else if (this.shouhouDetail.zyShouhou.shStatus == 1) {
        this.$axios.post("api/order-server/shouhou/shenhe", this.shouhouDetail.zyShouhou).then(res => {
          if (res.data.code == 200) {
            console.log(res.data);
            this.queryShouhou();
          }
        });
        this.dialogForShouhouDetail=false;
        this.queryShouhou();
        this.shouhouDetail={zyShouhou:{},zyShouhoudetail:{},zyOrder:{}};
      }
    },
    shenhenot() {
      if (this.shouhouDetail.zyShouhou.shStatus != 1) {
        this.$message({
          showClose: true,
          message: "不能审核",
          type: "error"
        });
      } else if (this.shouhouDetail.zyShouhou.shStatus == 1) {
        this.$axios
          .post("api/order-server/shouhou/quxiaoShouhou", this.shouhouDetail.zyShouhou)
          .then(res => {
            if (res.data.code == 200) {
              console.log(res.data);
              this.$message({
                showClose: true,
                message: "售后已关闭",
                type:"success"
              });
              this.queryShouhou();
            }
          });
          this.queryShouhou();
          this.dialogForShouhouDetail=false;
          this.shouhouDetail={zyShouhou:{},zyShouhoudetail:{},zyOrder:{}};
      }
    },
    tuikuan(){
        if(this.shouhouDetail.zyShouhou.shStatus!=5){
            this.$message({
          showClose: true,
          message: "当前状态不能退款",
          type: "error"
        });
        }else{
            this.$axios.post("api/order-server/shouhou/tuikuan",this.shouhouDetail.zyShouhou).then(res=>{
                if(res.data.code==200){
                    console.log(res.data);
                    this.dialogForShouhouDetail=false;
                    this.queryShouhou();
                }
            })
        }
    },
    getLoginUser() {
      this.$axios.post("api/order-server/shouhou/getLoginUser").then(res => {
        if (res.data.code == 200) {
          console.log(res.data);
          this.userName = res.data.data;
          initWatermark("User@"+this.userName, true);
        }
      });
    },
    fahuostatus(val) {
      // 1已申请、2已关闭、3待退货、4已退货、5待退款、6已完成
      if (val == 1) {
        return "已申请";
      } else if (val == 2) {
        return "已关闭";
      } else if (val == 3) {
        return "待退货";
      } else if (val == 4) {
        return "已退货";
      } else if (val == 5) {
        return "待退款";
      } else if (val == 6) {
        return "已完成";
      }
    },
    selecStatus(val) {
      this.param.shStatus = val;
      this.queryShouhou();
    },
    daochu() {},
    shouhoutype() {
      this.$axios
        .post("api/order-server/shouhou/queryAllShouhouType", params)
        .then(res => {
          console.log(res.data);
          if (res.data.code == 200) {
            this.tableData = res.data.data.list;
            this.shouhouTypeList = res.data.data;
          }
        });
    },
    queryShouhou() {
      let params = {};
      params.pageNum = this.pageNum;
      params.pageSize = this.pageSize;
      params.param = this.param;
      this.$axios
        .post("api/order-server/shouhou/queryShouhou", params)
        .then(res => {
          console.log(res.data);
          if (res.data.code == 200) {
            this.tableData = res.data.data.list;
            this.total = res.data.data.total;
            this.pages = res.data.data.pages;
          }
        });
    },
    queryAllShouhouType() {
      this.$axios
        .post("api/order-server/shouhou/queryAllShouhouType")
        .then(res => {
          console.log(res.data);
          if (res.data.code == 200) {
            this.shouhouTypeList = res.data.data;
          }
        });
    },
    handleSelectionChange() {},
    showShouhouState(val) {
      // 1已申请、2已关闭、3待退货、4已退货、5已完成
      switch (val) {
        case "1": {
          return "已申请";
        }
        case "2": {
          return "已关闭";
        }
        case "3": {
          return "待退货";
        }
        case "4": {
          return "已退货";
        }
        case "5": {
          return "已完成";
        }
      }
    },
    handleSelectionChange(val) {
      this.selectionData = val;
      // alert(val);
    },
    nextPage(val) {
      this.pageNum = val;
      this.queryShouhou();
    },
    precPage(val) {
      this.pageNum = val;
      this.queryShouhou();
    },
    changePage(val) {
      this.pageSize = val;
      this.pageNum = 1;
      this.queryShouhou();
    },
    changePageNum(val) {
      this.pageNum = val;
      this.queryShouhou();
    }
  },
  created() {
    this.queryAllShouhouType();
    this.queryShouhou();
    this.getLoginUser();
  },
  mounted() {
    //调用水印初始化方法
    //  initWatermark(this.userName, true);
    //  alert(this.userName);
  }
};
</script>
  
  <style>
</style>